import { ColumnsType } from 'antd/es/table';
import classNames from 'classnames';
import { FC } from 'react';

import { Table } from '@/components/base/Table';
import { useDictStore } from '@/store/dict';

interface VariablesTableProps {
  dataSource: VariableItem[];
  actions?: ColumnsType<VariableItem>;
  title?: string;
  className?: string;
}

export const ResponseVariablesTable: FC<VariablesTableProps> = memo((props) => {
  const dictStore = useDictStore();
  const columns: ColumnsType<VariableItem> = useMemo(() => {
    return [
      { title: '字段名称', dataIndex: 'varName', key: 'varName' },
      { title: '字段解释', dataIndex: 'varLabel', key: 'varLabel' },
      {
        title: '类型',
        dataIndex: 'varType',
        key: 'varType',
        render: (text: string) => <>{dictStore.fieldTypeMap[text]}</>
      }
    ];
  }, [dictStore.fieldTypeMap]);

  useEffect(() => {
    if (props.actions) {
      columns.push(...props.actions);
    }
  }, [columns, props.actions]);

  return (
    <div className={classNames(props.className, 'variables-table')}>
      <div className="text-14--bold pb-12">{props.title || '模型返回字段'}</div>
      <Table<VariableItem> rowKey="varName" pagination={false} columns={columns} dataSource={props.dataSource} />
    </div>
  );
});
